// 插入警告的弹框
import { Message } from 'element-ui'
// 引入vuex
import store from '@/store'
import router from '@/router'
import axios from 'axios'
// 配置axios
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // 根路径
  timeout: 5000 // 请求时间不能超过5s
})

// 请求拦截器，在正式发送接口之间，可以做一些配置
// 做什么？1. 注入token 请求头 ->为了有权限
service.interceptors.request.use(config => {
  // 在这个位置需要统一的去注入token
  const token = store.state.user.token
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器，在数据从后端返回到客户端前先被拦截下来做一些事情
// 做什么？1. 判断是否401 token 如果失效强制跳转到登录页面 2. 简化组件中请求数据的访问
service.interceptors.response.use(
  // 由于后端不以200-300为错误的标识，导致了静默通过，用户不知道自己是否成功
  // 所以这里我们需要手动抛出错误
  response => {
  //  先解构赋值拿到外面需要的数据和错误和提示
    const { data, success, message } = response.data
    if (success) {
      // 判断如果success是true，就按照之前的逻辑 retrun 数据
      return data
    } else {
      // 这里利用警告弹框提示
      Message.warning(message)
      // 复制下面的错误并且加入错误的提示信息
      return Promise.reject(message)
    }
  },
  error => { // 这里是401的位置，我们在这里写好失效token失效的方法
    console.dir(error) // 这里可以看到401的错误
    //  我们判断相应中的状态码是否是401，如果是，我们就清空数据并且跳转登录页
    if (error.response.status === 401) {
      store.commit('user/removeUserInfo')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

export default service
